<template>
  <div>
    <el-card class="box-card">
      <el-table :data="tableData"
                v-loading="loading"
                style="width: 100%"
                :header-cell-style="{background:'#f8f8f9','text-align':'center'}"
                :cell-style="{'text-align':'center'}">
        <el-table-column type="selection"
                         width="120">
        </el-table-column>
        <el-table-column prop="userId"
                         label="用户id"
                         width="120">
        </el-table-column>
        <el-table-column prop="nickName"
                         label="用户昵称"
                         width="120">
        </el-table-column>
        <el-table-column prop="money"
                         label="充值金额">
        </el-table-column>
        <el-table-column prop="isPay"
                         label="支付状态">
          <template slot-scope="scope">
            <span>{{scope.row.isPay==1?'未支付':'已支付'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="payTime"
                         label="付款时间"
                         width="130">
        </el-table-column>
        <el-table-column prop="createTime"
                         label="创建时间">
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="data">
            <el-button icon="el-icon-edit"
                       type="text"
                       @click="updateHandler(data.row.id)">修改</el-button>
            <el-button icon="el-icon-delete"
                       type="text"
                       @click="deleteHandler(data.row.id)">删除</el-button>
          </template>

        </el-table-column>

      </el-table>
      <div class="page"
           v-show="total!=0">
        <el-pagination background
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="queryParams.pageNum"
                       :page-sizes="[3, 5, 7, 9]"
                       :page-size="queryParams.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </el-card>
    <div>
      <el-dialog title="修改用户vip充值log"
                 @closed="closed"
                 :visible.sync="dialogVisible"
                 width="40%">
        <el-form :model="formData"
                 :rules="rules"
                 ref="ruleForm"
                 label-width="80px">
          <el-form-item label="备注"
                        prop="remark">
            <el-input v-model="formData.remark"
                      placeholder="请输入备注"></el-input>
          </el-form-item>
          <el-form-item label="用户id"
                        prop="userId">
            <el-input v-model="formData.userId"
                      placeholder="请输入id"></el-input>
          </el-form-item>
          <el-form-item label="充值金额">
            <el-input v-model="formData.money"
                      placeholder="请输入金额"></el-input>
          </el-form-item>
          <el-form-item label="日期">
            <el-col :span="11">
              <el-date-picker type="date"
                              placeholder="选择日期"
                              v-model="formData.payTime"
                              style="width: 100%;"></el-date-picker>
            </el-col>

          </el-form-item>
          <el-form-item label="类型"
                        prop="isPay">
            <el-select placeholder="请选择"
                       v-model="formData.isPay">
              <el-option label="未支付"
                         :value="1">
              </el-option>

              <el-option label="已支付"
                         :value="2">
              </el-option>

            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button @click="updateData"
                     type="primary">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      tableData: [],
      queryParams: { pageNum: 1, pageSize: 5 },
      total: 0,
      formData: {
        createBy: null,
        createTime: null,
        id: null,
        isPay: null,
        money: null,
        nickName: null,
        payTime: null,
        remark: null,
        params: null,
        searchValue: null,
        updateBy: null,
        updatateTime: null,
        userId: null
      },
      rules: {
        remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
        userId: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
        isPay: [{ required: true, message: '请确认是否支付', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async updateData() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return false
        const { data } = await this.$axios.put('com/vipLog', this.formData)

        if (data.code != 200) return this.$message.error(data.msg)
        this.$message.success(data.msg)
        this.dialogVisible = false
        this.getData()
      })
    },
    closed() {
      this.formData = {
        createBy: null,
        createTime: null,
        id: null,
        isPay: null,
        money: null,
        nickName: null,
        payTime: null,
        remark: null,
        params: null,
        searchValue: null,
        updateBy: null,
        updatateTime: null,
        userId: null
      }
    },
    async updateHandler(id) {
      this.loading = true
      this.dialogVisible = true
      let { data } = await this.$axios.get(`com/vipLog/${id}`)
      this.formData = data.data
      this.loading = false
    },
    deleteHandler(id) {
      let str = '是否确认删除用户vip充值log编号为"1394991241613951036"的数据项?'

      this.$confirm(`是否确认删除用户vip充值log编号为"${id}"的数据项?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.del(id)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    async del(id) {
      const data = await this.$axios.delete(`com/vipLog/${id}`)
      if (data.data.code != 200) return this.$message.error(data.data.msg)
      this.$message({ type: 'success', message: data.data.msg })
      this.getData()
    },
    async getData() {
      this.loading = true
      let { data } = await this.$axios.get('com/vipLog/list', { params: this.queryParams })
      if (data.code != 200) return this.$message.error(data.msg)
      this.tableData = data.rows
      this.loading = false
      this.total = data.total
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.cent {
  text-align: center;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.el-card__body {
  width: 100%;
  padding: 10px;
  padding-top: 20px;
}
.page {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>